﻿<div nz-row nzGutter="16">
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzTitle]="basicBar">
            <ng-template #basicBar>
                条形图
                <small class="text-sm font-weight-normal">基础条形图</small>
            </ng-template>
            <v-chart [forceFit]="true" [height]="275">
                <v-coord type="rect" direction="LB"></v-coord>
                <v-tooltip></v-tooltip>
                <x-bar url="/api/bar"></x-bar>
            </v-chart>
        </nz-card>
    </div>
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzTitle]="groupBar">
            <ng-template #groupBar>
                条形图
                <small class="text-sm font-weight-normal">分组条形图</small>
            </ng-template>
            <v-chart [forceFit]="true" [height]="275">
                <v-coord type="rect" direction="LT"></v-coord>
                <v-tooltip></v-tooltip>
                <v-legend></v-legend>
                <x-bar url="/api/bar/group"></x-bar>
            </v-chart>
        </nz-card>
    </div>
</div>
<div nz-row nzGutter="16">
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzTitle]="stackBar">
            <ng-template #stackBar>
                条形图
                <small class="text-sm font-weight-normal">堆叠条形图</small>
            </ng-template>
            <v-chart [forceFit]="true" [height]="275">
                <v-coord type="rect" direction="LB"></v-coord>
                <v-tooltip></v-tooltip>
                <x-bar url="/api/bar/group" isStack="true"></x-bar>
            </v-chart>
        </nz-card>
    </div>
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzTitle]="complexBar">
            <ng-template #complexBar>
                条形图
                <small class="text-sm font-weight-normal">复合条形图</small>
            </ng-template>
            <v-chart [forceFit]="true" [height]="275">
                <v-coord type="rect" direction="LT"></v-coord>
                <v-tooltip></v-tooltip>
                <v-legend></v-legend>
                <x-bar url="/api/bar/group"></x-bar>
                <x-line url="/api/line/multi"></x-line>
            </v-chart>
        </nz-card>
    </div>
</div>